<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上传更新</title>
<link href="../css/bootstrap/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<main id="app">
	<div class="container mt-5">
		<div class="p-5 mx-auto bg-secondary rounded">
			<div id="dropZone" class="p-5 mx-auto bg-light rounded text-center">
				<input type="file" name="file" style="display:none" ref="fileRef" @change="on_fileChange">
				<br>
				<img src="../images/up.ico">
				<div class="text-muted">将文件拖动到此处，或<a href="" @click.prevent="on_uploadFile">点击上传</a></div>
				<br>
				<div>{{myfilename}}</div>
			</div>
		</div>
	</div>
	<div class="container mt-5">
		<div class="d-flex mb-1">	
			<div class="p-2">
				<form action="">
				    <div class="form-check form-switch">
				      	<input @click="on_setlabel(label)" class="form-check-input checked" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
				      	<label class="form-check-label" for="mySwitch">更新文件</label>
				    </div>
				</form>
			</div>
			<div :class="fileid">
				<input type="text" class="form-control form-control-sm" v-model="value" placeholder="文件ID...">
			</div>
		</div>
	</div>
	<div class="container mt-1">
		<div class="mx-auto">
			<div :class="progrees_class">
    			<div class="progress-bar" :style="progrees"></div>
  			</div>
  		</div>
  	</div>
	<div class="container mt-4">
		<div class="d-flex justify-content-around mb-3 mt-5">
			<div class="d-grid flex-fill">
				<button type="button" @click="on_updatefile" class="btn btn-block btn-info btn-lg">{{buttonvalue}}</button>
			</div>
			<div class="d-grid flex-fill"></div>
			<div class="d-grid flex-fill">
			  	<button @click="on_break" type="button" class="btn btn-block btn-info btn-lg">取消</button>
			</div>
		</div>
	</div>

	<!-- Modal -->
	<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered">
		    <div class="modal-content">
		      	<div class="modal-header">
		        	<h5 class="modal-title" id="staticBackdropLabel">提示</h5>
		        	<button type="button" class="btn-close" @click="on_close" data-bs-dismiss="modal" aria-label="Close"></button>
		      	</div>
		      	<div class="modal-body">
		        	{{updatecode}}
		      	</div>
		      	<div class="modal-footer">
		        	<button type="submit" class="btn btn-primary" @click="on_break" data-bs-dismiss="modal">确定</button>
		      	</div>
		    </div>
		</div>
	</div>
</main>
<script src="../js/axios/axios.min.js"></script>
<script src="../js/vue/vue.js"></script>
<script src="../js/data/myupdate.js"></script>
<script src="../js/bootstrap/bootstrap.bundle.min.js"></script>
</body>
</html>
